<template>
  <div id="home"
       v-waterMarker="style">
    {{ num }}<br>
    <ul>
      <li v-copy="'sdfasdfw'">复制</li>
      <li v-longpress="longpress">长按触发</li>
      <li v-debounce="debounce">点击防抖</li>
      <li v-permission="'1'">权限1</li>
      <li v-permission="'5'">权限2</li>
      <li v-draggable
          style="position: absolute">拖拽</li>
    </ul>
  </div>
</template>

<script>
import { CountUp } from 'countup.js'
import { getList } from '@/api/home.js'
export default {
  name: 'home',
  data () {
    return {
      numAnim: null,
      style: {
        text: '66coding',
        textColor: 'rgba(180,180,180,0.4)'
      }
    }
  },
  created () {
    getList().then(res => {
      console.log(res)

    })

  },
  computed: {
    num () {
      return this.$store.state.count
    }
  },
  mounted () {
    this.initCountUp()
    this.$store.commit('increment')
    this.$store.dispatch('increment')
  },
  methods: {
    initCountUp () {
      this.numAnim = new CountUp(this.$refs.countup, 2019, { startVal: 0 })
      this.numAnim.start()
    },
    longpress () {
      alert('长按复制')
    },
    debounce () {
      console.log('触发一次')
    }
  }
}
</script>

<style scoped>
#home {
  height: 100%;
  width: 100%;
}
ul {
  position: relative;
}
li {
  height: 30px;
  line-height: 30px;
  margin: 5px;
  background: aquamarine;
}
</style>